<template>
  <div class="app-container">
    <!-- 顶部工具栏：标题在左，时间范围与新增按钮在右侧右对齐 -->
    <el-card shadow="never" class="main-card">
      <div class="toolbar">
        <div class="toolbar-left">
          <span class="page-title">会议列表</span>
        </div>
        <div class="toolbar-right">
          会议时间：
          <el-date-picker v-model="queryParams.dateRange" type="daterange" range-separator="至" start-placeholder="开始日期"
            end-placeholder="结束日期" format="yyyy-MM-dd" value-format="yyyy-MM-dd" size="small" unlink-panels
            style="width: 240px; margin-right: 8px;" @change="handleQuery" />
          <el-input v-model="queryParams.creatorName" placeholder="发起人" size="small" clearable
            style="width: 140px; margin-right: 8px;" @input="handleQuery" @clear="handleQuery" />
          <el-input v-model="queryParams.meetingRoom" placeholder="会议室" size="small" clearable
            style="width: 140px; margin-right: 8px;" @input="handleQuery" @clear="handleQuery" />
          <!-- <el-select v-model="queryParams.meetingStatus" placeholder="会议状态" size="small" clearable
            style="width: 120px; margin-right: 8px;" @change="handleQuery" @clear="handleQuery">
            <el-option :value="1" label="未开始" />
            <el-option :value="2" label="进行中" />
            <el-option :value="3" label="已完成" />
          </el-select> -->

          <el-button type="primary" icon="el-icon-plus" size="small" @click="handleAdd">新增</el-button>
        </div>
      </div>

      <!-- 卡片列表容器 -->
      <div class="cards-container">
        <el-row :gutter="16" class="cards-row">
          <el-col :xs="24" :sm="12" v-for="item in pagedMeetList" :key="item.id" style="margin-bottom: 8px;">
            <el-card shadow="hover" class="meet-card">
              <div class="meet-card-header">
                <div class="meet-card-title">{{ item.meetingName }}</div>
                <div class="meeting-status" :class="'status-' + item.meetingStatus">
                  <span class="status-icon">{{ getMeetingStatusIcon(item.meetingStatus) }}</span>
                  <span class="status-text">{{ getMeetingStatusText(item.meetingStatus) }}</span>
                </div>
              </div>
              <div class="meet-card-body">
                <div class="meet-row"><i class="el-icon-time"></i><span>{{ item.meetingDate }}
                    {{ item.startTime }} - {{ item.endTime }}</span></div>
                <div class="meet-row">
                  <span class="meet-label">发起人：</span>
                  <span class="meet-value">{{ item.creatorName || '未设置' }}</span>
                </div>
                <div class="meet-row meet-row-attendees">
                  <span class="meet-label">参会人：</span>
                  <span class="meet-value meet-value-attendees">{{item.officeMeetingAttendeeList ?
                    (Array.isArray(item.officeMeetingAttendeeList) ? item.officeMeetingAttendeeList.map(a => a.userName
                      || a.nickName || a.userId).join('、') : item.officeMeetingAttendeeList) : '未设置'}}</span>
                </div>
                <div class="meet-row">
                  <span class="meet-label">会议室：</span>
                  <span class="meet-value">{{ item.meetingRoom || '未设置' }}</span>
                </div>
                <div class="meet-row">
                  <span class="meet-label">会议形式：</span>
                  <span class="meet-value">
                    <dict-tag :options="dict.type.meeting_format" :value="item.meetingType" size="mini" />
                  </span>
                </div>
                <!-- <div class="meet-row" v-if="item.agenda">
                  <span class="meet-label">会议议程：</span>
                  <span class="meet-value">{{ item.agenda }}</span>
                </div> -->
              </div>
              <div class="meet-row-actions-wrapper">
                <div class="meet-row meet-tags">
                  <span class="meet-value">
                    具体事项：
                    <el-tag type="success" size="mini" class="meet-tag">
                      {{ item.taskCount != null ? item.taskCount : 0 }} 项
                    </el-tag>
                    <!-- <span class="meet-tag-gap"></span> -->
                    未完成事项：
                    <el-tag type="danger" size="mini" class="meet-tag">
                      {{ item.unfinishedTaskCount != null ? item.unfinishedTaskCount : 0 }} 项
                    </el-tag>
                  </span>
                </div>
                <div class="meet-card-actions">
                  <el-button v-if="item.deletUpdateStatus" class="btn btn-edit" size="mini"
                    @click="handleEdit(item)">修改</el-button>
                  <router-link v-if="item.detailStatus" :to="'/officeMeeting/meetingRecordDetail/index/' + item.id"
                    class="link-type">
                    <el-button class="btn btn-detail" size="mini">查看详情</el-button>
                  </router-link>
                  <el-button v-if="item.deletUpdateStatus" class="btn btn-delete" size="mini"
                    @click="handleDelete(item)">删除会议</el-button>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
      </div>

      <!-- 分页器 -->
      <div class="pagination-wrapper">
        <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize" @pagination="getList" />
      </div>
    </el-card>

    <!-- 添加或修改项目会议记录对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="120px">
        <!-- <el-form-item label="所属项目ID" prop="projectId">
          <el-input v-model="form.projectId" placeholder="请输入所属项目ID" />
        </el-form-item> -->
        <el-form-item label="会议名称" prop="meetingName">
          <el-input v-model="form.meetingName" placeholder="请输入会议名称" :disabled="lockMeetingName" />
        </el-form-item>
        <el-form-item label="会议日期" prop="meetingDate">
          <el-date-picker clearable v-model="form.meetingDate" type="date" value-format="yyyy-MM-dd"
            placeholder="请选择会议日期" style="width: 100%">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="会议开始时间" prop="startTime">
          <el-time-picker clearable v-model="form.startTime" value-format="HH:mm:ss" placeholder="请选择会议开始时间"
            style="width: 100%" @change="handleStartTimeChange">
          </el-time-picker>
        </el-form-item>
        <el-form-item label="会议结束时间" prop="endTime">
          <el-time-picker clearable v-model="form.endTime" value-format="HH:mm:ss" placeholder="请选择会议结束时间"
            style="width: 100%" @change="handleEndTimeChange">
          </el-time-picker>
        </el-form-item>
        <el-form-item label="会议室" prop="meetingRoom">
          <el-input v-model="form.meetingRoom" placeholder="请输入会议室" />
        </el-form-item>
        <el-form-item label="会议形式" prop="meetingType">
          <el-select v-model="form.meetingType" placeholder="请选择会议形式" filterable style="width: 100%">
            <el-option v-for="dict in dict.type.meeting_format" :key="dict.value" :label="dict.label"
              :value="parseInt(dict.value)">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="参会人员" prop="userIds">
          <div class="participant-selector">
            <el-cascader ref="participantCascader" v-model="participantPaths" :options="participantOptions"
              :props="getCascaderProps()" clearable filterable placeholder="请选择参会人员" style="width: 100%"
              @change="handleParticipantChange">
            </el-cascader>
            <span v-if="participantOverflowCount > 0" class="tag-overflow">
              +{{ participantOverflowCount }}
            </span>
          </div>
        </el-form-item>
        <el-form-item label="会议议程" prop="agenda">
          <el-input v-model="form.agenda" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="腾讯会议链接" prop="tencentMeetingLink">
          <el-input v-model="form.tencentMeetingLink" type="textarea" placeholder="请输入内容" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
import { listMeetingRecord, getMeetingRecord, delMeetingRecord, addMeetingRecord, updateMeetingRecord } from "@/api/officeMeeting/meetingRecord";
import { deptTreeSelect, listUser } from "@/api/system/user";
export default {
  name: 'OfficeMeetingList',
  dicts: ['meeting_format'],
  data() {
    return {
      loading: false,
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10, // 一页显示 10 个（2 列 * 5 行）
        dateRange: [],
        keyword: null,
        creatorName: null,
        projectId: null,
        meetingName: null,
        meetingDate: null,
        startTime: null,
        endTime: null,
        meetingRoom: null,
        meetingType: null,
        meetingStatus: null
      },
      allMeetList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 是否锁定会议名称编辑（例如已有会议事项时）
      lockMeetingName: false,
      // 表单参数
      form: {},
      // 参会人员级联选择器的路径值（用于显示）
      participantPaths: [],
      // 参会人员级联选择器选项
      participantOptions: [],
      // 表单校验
      rules: {
        projectId: [
          { required: true, message: "所属项目ID不能为空", trigger: "blur" }
        ],
        meetingName: [
          { required: true, message: "会议名称不能为空", trigger: "blur" }
        ],
        meetingDate: [
          { required: true, message: "会议日期不能为空", trigger: "blur" }
        ],
        startTime: [
          { required: true, message: "会议开始时间不能为空", trigger: "change" },
          { validator: (rule, value, callback) => this.validateStartTime(rule, value, callback), trigger: "change" }
        ],
        endTime: [
          { required: true, message: "会议结束时间不能为空", trigger: "change" },
          { validator: (rule, value, callback) => this.validateEndTime(rule, value, callback), trigger: "change" }
        ],
        userIds: [
          { required: true, message: "参会人员不能为空", trigger: "blur" }
        ],
        meetingRoom: [
          { required: true, message: "会议室不能为空", trigger: "blur" }
        ],
        meetingType: [
          { required: true, message: "会议形式不能为空", trigger: "change" }
        ]
      }
    }
  },
  computed: {
    pagedMeetList() {
      // 直接使用分页后的数据源（getList 已根据 pageNum/pageSize/筛选更新 allMeetList）
      return this.allMeetList
    },
    participantOverflowCount() {
      const total = Array.isArray(this.participantPaths) ? this.participantPaths.length : 0
      return total > 3 ? total - 3 : 0
    }
  },
  created() {
    this.getList()
  },
  mounted() {
    // 监听窗口大小改变，重新统一卡片高度
    this.resizeHandler = () => {
      this.unifyCardHeights()
    }
    window.addEventListener('resize', this.resizeHandler)
  },
  beforeDestroy() {
    if (this.resizeHandler) {
      window.removeEventListener('resize', this.resizeHandler)
    }
  },
  methods: {
    /** 查询项目会议记录列表 */
    getList() {
      this.loading = true

      // 处理日期范围筛选
      const params = { ...this.queryParams }
      const [start, end] = this.queryParams.dateRange || []
      if (start && end) {
        // params.startTime = start + ' 00:00:00'
        // params.endTime = end + ' 23:59:59'
        params.startDate = start
        params.endDate = end
      }
      delete params.dateRange

      listMeetingRecord(params).then(response => {
        this.allMeetList = response.rows || []
        this.total = response.total || 0
        this.loading = false
        this.$nextTick(() => {
          this.unifyCardHeights()
        })
      }).catch(() => {
        this.loading = false
      })
    },
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.lockMeetingName = false
      this.getDeptTree()
      this.open = true
      this.title = "新建会议"
    },
    /** 修改按钮操作 */
    handleEdit(row) {
      this.reset()
      const id = row.id
      // 如果当前会议已有事项（taskCount > 0），则不允许修改会议名称
      this.lockMeetingName = !!(row && typeof row.taskCount === 'number' && row.taskCount > 0)
      // 先加载部门树，然后获取会议记录
      Promise.all([
        this.getDeptTree(),
        getMeetingRecord(id)
      ]).then(([, response]) => {
        this.form = response.data
        // 优先使用后端返回的 deptIds 二维数组直接回显
        if (Array.isArray(this.form.deptIds) && this.form.deptIds.length > 0) {
          this.participantPaths = this.form.deptIds
        } else if (this.form.userIds && Array.isArray(this.form.userIds) && this.form.userIds.length > 0) {
          // 否则将用户ID数组转换为路径数组，以便级联选择器正确显示
          this.participantPaths = this.convertUserIdsToPaths(this.form.userIds)
        } else {
          this.participantPaths = []
        }
        // 回填 userIds，避免未操作时校验失败
        if ((!this.form.userIds || this.form.userIds.length === 0) && Array.isArray(this.participantPaths) && this.participantPaths.length > 0) {
          this.form.userIds = this.participantPaths.map(p => Array.isArray(p) ? p[p.length - 1] : p)
        }
        this.open = true
        this.title = "修改项目会议记录"
      })
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const id = row.id
      this.$modal.confirm('是否确认删除会议： ' + row.meetingName + ' ?').then(() => {
        return delMeetingRecord(id)
      }).then(() => {
        this.getList()
        this.$modal.msgSuccess("删除成功")
      }).catch(() => { })
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        projectId: null,
        meetingName: null,
        meetingDate: null,
        startTime: null,
        endTime: null,
        meetingRoom: null,
        meetingType: null,
        userIds: [],
        agenda: null,
        tencentMeetingLink: null
      }
      this.participantPaths = []
      this.resetForm("form")
    },
    /** 提交按钮 */
    submitForm() {
      // 确保未修改参会人员时也能通过校验：由路径值回填 userIds
      if ((!this.form.userIds || this.form.userIds.length === 0) && Array.isArray(this.participantPaths) && this.participantPaths.length > 0) {
        this.form.userIds = this.participantPaths.map(p => Array.isArray(p) ? p[p.length - 1] : p)
      }
      this.$refs["form"].validate(valid => {
        if (valid) {
          // 组合日期和时间为完整的 yyyy-MM-dd HH:mm:ss 格式
          const formData = { ...this.form }

          if (formData.id != null) {
            updateMeetingRecord(formData).then(response => {
              this.$modal.msgSuccess("修改成功")
              this.open = false
              this.getList()
            })
          } else {
            addMeetingRecord(formData).then(response => {
              this.$modal.msgSuccess("新增成功")
              this.open = false
              this.getList()
            })
          }
        }
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    /** 获取级联选择器配置 */
    getCascaderProps() {
      return {
        multiple: true,
        value: 'value',
        label: 'label',
        children: 'children',
        checkStrictly: false,
        emitPath: true
      }
    },
    /** 查询部门下拉树结构 */
    async getDeptTree() {
      try {
        const response = await deptTreeSelect()
        const deptTree = (response.data && response.data[0] && response.data[0].children) ? response.data[0].children : (response.data || [])
        const flattenedDepts = this.flattenDeptTree(deptTree)
        const options = await Promise.all(flattenedDepts.map(async dept => {
          const users = await this.fetchUsersByDept(dept.id)
          return {
            value: dept.id,
            label: dept.label,
            children: users.map(user => ({
              value: user.userId,
              label: `${user.nickName || user.userName}`,
              leaf: true
            }))
          }
        }))
        this.participantOptions = options.filter(option => option.children.length > 0)
      } catch (error) {
        console.error('获取部门树失败', error)
        this.participantOptions = []
      }
    },
    /** 将部门树扁平化为两级结构 */
    flattenDeptTree(tree, parentLabel = '') {
      const result = []
      if (!Array.isArray(tree)) {
        return result
      }
      tree.forEach(dept => {
        const currentLabel = parentLabel ? `${parentLabel} / ${dept.label}` : dept.label
        result.push({ id: dept.id, label: currentLabel })
        if (dept.children && dept.children.length) {
          result.push(...this.flattenDeptTree(dept.children, currentLabel))
        }
      })
      return result
    },
    /** 获取部门下的用户列表 */
    async fetchUsersByDept(deptId) {
      try {
        const response = await listUser({ deptId, pageNum: 1, pageSize: 1000 })
        return response.rows || []
      } catch (error) {
        console.error(`获取部门 ${deptId} 用户失败`, error)
        return []
      }
    },
    /** 参会人员选择变化 */
    handleParticipantChange(value) {
      // 只保留最后叶子节点（用户ID）
      if (Array.isArray(value)) {
        this.form.userIds = value.map(path => {
          // 如果是数组路径，取最后一个元素（用户ID）
          if (Array.isArray(path)) {
            return path[path.length - 1]
          }
          // 如果已经是单个值，直接返回
          return path
        })
      } else {
        this.form.userIds = []
      }
      console.log('选中的参会人员ID:', this.form.userIds)
    },
    /** 将用户ID数组转换为路径数组 */
    convertUserIdsToPaths(userIds) {
      const paths = []
      if (!Array.isArray(userIds) || !this.participantOptions || this.participantOptions.length === 0) {
        return paths
      }

      // 遍历所有部门选项
      this.participantOptions.forEach(deptOption => {
        if (deptOption.children && Array.isArray(deptOption.children)) {
          // 遍历部门下的所有用户
          deptOption.children.forEach(userOption => {
            // 如果用户ID在userIds中，添加对应的路径
            if (userIds.includes(userOption.value)) {
              paths.push([deptOption.value, userOption.value])
            }
          })
        }
      })

      return paths
    },
    /** 会议开始时间变更 */
    handleStartTimeChange() {
      if (this.form.endTime) {
        this.$nextTick(() => {
          if (this.$refs.form) {
            this.$refs.form.validateField('endTime')
          }
        })
      }
    },
    /** 会议结束时间变更 */
    handleEndTimeChange() {
      this.$nextTick(() => {
        if (this.$refs.form) {
          this.$refs.form.validateField('endTime')
        }
      })
    },
    /** 校验会议开始时间 */
    validateStartTime(rule, value, callback) {
      if (!value) {
        callback()
        return
      }
      const endTime = this.form.endTime
      if (endTime && value >= endTime) {
        callback(new Error('会议开始时间必须早于结束时间'))
        return
      }
      callback()
    },
    /** 校验会议结束时间 */
    validateEndTime(rule, value, callback) {
      if (!value) {
        callback()
        return
      }
      const startTime = this.form.startTime
      if (!startTime) {
        callback(new Error('请先选择会议开始时间'))
        return
      }
      if (startTime >= value) {
        callback(new Error('会议结束时间必须晚于开始时间'))
        return
      }
      callback()
    },
    /** 获取会议状态图标 */
    getMeetingStatusIcon(status) {
      const iconMap = {
        1: '😐',    // 未开始
        2: '▶',     // 进行中
        3: '✓'      // 已完成
      }
      return iconMap[status] || '•'
    },
    /** 获取会议状态文本 */
    getMeetingStatusText(status) {
      const statusMap = {
        1: '未开始',
        2: '进行中',
        3: '已完成'
      }
      return statusMap[status] || '未知'
    },
    /** 获取会议状态标签类型 */
    getMeetingStatusType(status) {
      const typeMap = {
        1: 'info',      // 未开始 - 灰色
        2: 'warning',   // 进行中 - 橙色
        3: 'success'    // 已完成 - 绿色
      }
      return typeMap[status] || ''
    },
    /** 统一同一行卡片的高度 */
    unifyCardHeights() {
      this.$nextTick(() => {
        const cards = this.$el.querySelectorAll('.cards-row .el-col')
        if (cards.length === 0) return

        // 按行分组卡片
        const rows = []
        let currentRow = []
        let currentTop = null

        cards.forEach((card, index) => {
          const rect = card.getBoundingClientRect()
          const top = rect.top

          if (currentTop === null || Math.abs(top - currentTop) < 10) {
            // 同一行
            currentRow.push(card)
            if (currentTop === null) currentTop = top
          } else {
            // 新的一行
            if (currentRow.length > 0) {
              rows.push(currentRow)
            }
            currentRow = [card]
            currentTop = top
          }
        })

        // 添加最后一行
        if (currentRow.length > 0) {
          rows.push(currentRow)
        }

        // 统一每一行的高度
        rows.forEach(row => {
          let maxHeight = 0
          row.forEach(card => {
            const cardElement = card.querySelector('.meet-card')
            if (cardElement) {
              cardElement.style.height = 'auto'
              const height = cardElement.offsetHeight
              if (height > maxHeight) {
                maxHeight = height
              }
            }
          })

          // 设置所有卡片为同一高度
          row.forEach(card => {
            const cardElement = card.querySelector('.meet-card')
            if (cardElement) {
              cardElement.style.height = maxHeight + 'px'
            }
          })
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  height: calc(100vh - 130px);
  margin: 15px;
  background-color: white;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.main-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: none;

  ::v-deep .el-card__body {
    height: 100%;
    display: flex;
    flex-direction: column;
    padding: 0;
    box-sizing: border-box;
    overflow: hidden;
    border: none;
  }
}

.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  flex-shrink: 0;

  &-left {
    .page-title {
      font-size: 18px;
      font-weight: 600;
    }
  }

  &-right {
    display: flex;
    align-items: center;
    justify-content: flex-end;
  }
}

.participant-selector {
  position: relative;
  width: 100%;

  ::v-deep .el-input__inner {
    padding-right: 60px;
  }

  ::v-deep .el-cascader__tags {
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;

    .el-tag:nth-of-type(n+4) {
      display: none;
    }
  }

  .tag-overflow {
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: #909399;
    background: #f4f4f5;
    border-radius: 4px;
    padding: 0 6px;
    line-height: 20px;
    pointer-events: none;
  }
}

.cards-container {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  // margin-bottom: 16px;
  min-height: 0;
  padding-right: 8px;
  padding-left: 8px;

  /* 自定义滚动条样式 */
  &::-webkit-scrollbar {
    width: 8px;
  }

  &::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
  }

  &::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;

    &:hover {
      background: #a8a8a8;
    }
  }
}

.cards-row {
  /* 左对齐，避免最后一行出现“中间空一格”的视觉效果 */
  justify-content: flex-start;
}

.pagination-wrapper {
  flex-shrink: 0;
  border-top: 1px solid #ebeef5;

  ::v-deep .pagination-container {
    /* padding: 10px 0; */
    background: transparent;
    overflow: visible;

    .el-pagination {
      margin: 0;
      line-height: normal;
    }
  }
}

.meet-card {
  padding: 6px;
  width: 100%;
  display: flex;
  flex-direction: column;
  /* 固定卡片高度，避免不同内容高度导致布局错位 */
  height: 190px;
  box-sizing: border-box;
  overflow: hidden;

  ::v-deep .el-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 12px;
  }

  .meet-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
  }

  .meet-card-title {
    font-size: 16px;
    font-weight: 700;
  }

  .meeting-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    border-radius: 0;
    font-size: 14px;
    font-weight: 500;
    background: transparent;
  }

  .status-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 11px;
    line-height: 1;
    flex-shrink: 0;
  }

  .meeting-status.status-1 {
    .status-icon {
      background: #ff9500;
    }

    .status-text {
      color: #ff9500;
    }
  }

  .meeting-status.status-2 {
    .status-icon {
      background: #409EFF;
    }

    .status-text {
      color: #409EFF;
    }
  }

  .meeting-status.status-3 {
    .status-icon {
      background: #30a46c;
    }

    .status-text {
      color: #30a46c;
    }
  }

  .status-text {
    font-size: 14px;
    font-weight: 500;
  }

  .meet-card-body {
    flex: 1;
    display: flex;
    flex-direction: column;

    .meet-row {
      display: flex;
      align-items: center;
      color: #606266;
      margin: 4px 0;

      i {
        margin-right: 6px;
        color: #909399;
      }

      .meet-label {
        min-width: 60px;
        color: #909399;
        font-size: 13px;
        margin-right: 4px;
        flex-shrink: 0;
      }

      .meet-value {
        flex: 1;
        color: #606266;
        font-size: 13px;
        word-break: break-all;
      }

      // 参会人员特殊样式：限制为两行，超出显示省略号
      &.meet-row-attendees {
        .meet-value-attendees {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          line-clamp: 2; // 标准属性，用于兼容性
          overflow: hidden;
          text-overflow: ellipsis;
          word-break: break-all;
          line-height: 1.5;
          max-height: calc(1.5em * 2); // 两行的高度
        }
      }
    }

    .meet-tags {
      .meet-value {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
      }
    }
  }

  .meet-tag-gap {
    width: 10px;
    display: inline-block;
  }

  .meet-row-actions-wrapper {
    display: flex;
    align-items: center;
    justify-content: space-between;
    //margin-top: 8px;
    gap: 12px;
    flex-shrink: 0;
    color: #606266;
    font-size: 13px;

    .meet-row.meet-tags {
      flex: 1;
      margin: 0;
      min-width: 0;
      color: #606266;

      .meet-value {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 12px;
        justify-content: flex-start;
        color: #606266;
        font-size: 13px;
      }
    }
  }

  .meet-card-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;

    .link-type {
      text-decoration: none;
    }

    ::v-deep .el-button.btn {
      padding: 6px 14px !important;
      border-radius: 6px !important;
      border: none !important;
      font-size: 12px !important;
      font-weight: 500 !important;
      transition: all 0.2s !important;
      cursor: pointer;

      &.btn-edit {
        background: #10b981 !important;
        color: #fff !important;
        border-color: #10b981 !important;

        &:hover {
          background: #059669 !important;
          border-color: #059669 !important;
        }
      }

      &.btn-detail {
        background: #3b82f6 !important;
        color: #fff !important;
        border-color: #3b82f6 !important;

        &:hover {
          background: #2563eb !important;
          border-color: #2563eb !important;
        }
      }

      &.btn-delete {
        background: #ef4444 !important;
        color: #fff !important;
        border-color: #ef4444 !important;

        &:hover {
          background: #dc2626 !important;
          border-color: #dc2626 !important;
        }
      }
    }
  }
}
</style>
